<template>
  <common-card title="累计用户数" value="1,007,000">
    <template>
      <div id="total-users-chart" :style="{ width: '100%', height: '100%' }"></div>
    </template>
    <template #footer>
      <div class="total-users-footer">
        <span>日同比 </span>
        <span class="emphasis">8.74%</span>
        <div class="increase"></div>
        <span class="month">月同比 </span>
        <span class="emphasis">35.91%</span>
        <div class="decrease"></div>
      </div>
    </template>
  </common-card>
</template>
<script>
import cardMixin from '../../mixins/cardMixin'
export default {
  name: 'TodayUser',
  mixins: [cardMixin],
  mounted() {
    const chartDom = document.getElementById('total-users-chart')
    const chart = this.$echarts.init(chartDom)
    chart.setOption({
      xAxis: {
        show: false,
        type: 'value' // x 轴设置值
      },
      yAxis: {
        show: false,
        type: 'category' // y 轴设置分类
      },
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      },
      series: [
        {
          type: 'bar',
          stack: '总量', // 让两个柱状图合并
          data: [200],
          barWidth: 10, // 一个即可
          itemStyle: {
            color: '#45c946'
          }
        },
        {
          type: 'bar',
          data: [250],
          stack: '总量',
          itemStyle: {
            color: '#eee'
          }
        },
        // 上面的三角形
        {
          stack: '总量',
          type: 'custom', // 自定义
          data: [200], // 和第一个柱状图一样
          // params 图形基础信息 api 自带的工具方法
          renderItem: (params, api) => {
            const value = api.value(0) // 获取第一个元素的 data 即 data:[200]
            // console.log('value', value)
            const endPoint = api.coord([value, 0]) // 获取到x轴200 y轴0的坐标
            // console.log('endPoint', endPoint)
            // 绘制图形
            return {
              type: 'group', // 组,所有图形一个分组管理
              position: endPoint, // 位置
              children: [
                {
                  type: 'path', // 线段
                  // 形状
                  shape: {
                    // svg 中d的内容 图形形状
                    d: 'M1024 255.996 511.971 767.909 0 255.996 1024 255.996z',
                    x: -5,
                    y: -20,
                    width: 10,
                    height: 10,
                    layout: 'cover' // 根据宽高,坐标自定义缩放策略  cover(填满) center(保持原来宽高)
                  },
                  style: {
                    fill: '#45c946' // 填充色
                  }
                },
                {
                  type: 'path', // 线段
                  // 形状
                  shape: {
                    // svg 中d的内容 图形形状
                    d: 'M0 767.909l512.029-511.913L1024 767.909 0 767.909z',
                    x: -5,
                    y: 10,
                    width: 10,
                    height: 10,
                    layout: 'cover'
                  },
                  style: {
                    fill: '#45c946' // 填充色
                  }
                }
              ]
            }
          }
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped>
.total-users-footer {
  display: flex;
  align-items: center;
}
.month {
  margin-left: 10px;
}
</style>
